<template>
    <div class="cIndex">
        <el-button class="el-button--warning">ConsumerIndex</el-button>
        <div class="el-container">
            <div class="el-aside" style="width: 20%;height:500px;background-color: paleturquoise">

                <!--            <router-link to="/consumer/download" >下载练习页面</router-link>-->
                <!--            <br/>-->
                <!--            <router-link to="/consumer/personAdd" >实体练习页面</router-link>-->

                <el-menu class="cMenu" router="true" :default-active="$route.path">
                    <!--                <el-submenu v-for="group in $router.options.routes"-->
                    <el-submenu class="cSubMenu" v-for="group in menuRoutes"
                                :key="group.path" :index="group.path">
                        <template slot="title">
                            <i class="el-icon-location"></i>
                            <el-link :underline="false">{{group.description}}</el-link>
<!--                            <span></span>-->
                        </template>

                        <el-menu-item  class="cMenuItem" v-for="i in group.children"
                                      :key="i.path" :index="i.path">
                            <i class="el-icon-document"></i>
                            <span slot="title">
                                 <el-link :underline="false" >{{i.description}}</el-link>
                                </span>
                        </el-menu-item>
                    </el-submenu>
                </el-menu>

            </div>
            <router-view></router-view>
        </div>
    </div>
</template>

<script>
    // import New from './components/New.vue';
    import {consumerRoutes} from '../router'

    export default {

        name: "ConsumerIndex",
        components: {
            // New,Old,
        },
        props: {
            sampleP: {
                type: Number,
                default: 0
            },
        },
        data() {
            return {
                sampleD: 'value',
                menuRoutes: [consumerRoutes],
            }
        },
        computed: {
            // sampleC() {
            //     return this.sampleD+'--';
            // }
        },
        created() {
        },
        mounted() {
        },
        methods: {
            sampleM() {

            }
        },
        watch: {
            // sampleC(newValue, oldValue) {
            //
            // }
        },
    }
</script>

<style scoped>
    /*<style lang='scss' scoped>*/
    .cIndex {
        background-color: rgba(110, 132, 255, 0.72);
    }
    .cMenuItem{
        background-color: rgba(255,160,15,0.72);
        border-color: rgba(255,83,11,0.72);
    }
    .cSubMenu{
        background-color: #b3b33e;

    }
    .cMenu{
        background-color: rgba(211,255,23,0.72);

    }


</style>